<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" width="50" height="50"></image>
		<img border="0" src="https://www.w3cschool.cn/statics/images/course/pulpit.jpg" width="50" height="50">
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button @click="onAdd">新增</button>
		<<uni-table stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center">序号</uni-th>
				<uni-th align="center">标题</uni-th>
				<uni-th align="center">内容</uni-th>
				<uni-th align="center">分类</uni-th>
				<uni-th align="center">封面大图</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in list" :key="item._id">
				<uni-td>{{index+1}}</uni-td>
				<uni-td>{{item.title}}</uni-td>
				<uni-td>{{item.content}}</uni-td>
				<uni-td>{{item.category}}</uni-td>
				<uni-td><image :src="item.thumb" width="50" height="50"></image></uni-td>
			</uni-tr>
		</uni-table>

	</view>
</template>

<script setup>
	const title = "hello";
	const db = uniCloud.database();

	import { ref } from 'vue';
	
	const list = ref([]);
	
	const onGetList = async ()=>{
		const result = await db.collection("hm-article").get();
		console.log(result);
		list.value = result.result.data;
	};
	onGetList();
	
	const onAdd = async ()=>{
		await db.collection("hm-article").add(
			{
				title:"文琦顺风",
				content:"11文琦顺风",
				category: 1,
				thumb:"https://mp-ab79ae36-3036-4f6c-82c5-b60b73f76776.cdn.bspapp.com/wenqi.jpg"
			}
		);
		onGetList();
	};

</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
